<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <div class="btnbox">
          <el-button @click="toprint" class="btn" size="mini" type="primary"
            >打印</el-button
          >
        </div>
        <el-tabs v-model="active">
          <el-tab-pane label="登录账户设置" name="first">
            <!-- 放置表单 -->
            <el-form
              
              :model="formData"
              :rules="rules"
              label-width="120px"
              style="margin-left: 120px; margin-top: 30px"
            >
              <el-form-item label="姓名" prop="username">
                <el-input
                  v-model="formData.username"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="formData.password"
                  style="width: 300px"
                  type="password"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="submit" type="primary">更新</el-button>
                <el-button @click="$router.back()">取消</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情" name="second">
            <userInfo :userInfo="userInfo"></userInfo
          ></el-tab-pane>
          <el-tab-pane label="岗位信息" name="third">
            <job-info></job-info>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getUserInfoApi, saveUserDetailById } from "@/api/employees";
export default {
  components: {
    jobInfo: () => import("./components/job-info.vue"),
    userInfo: () => import("./components/user-info.vue"),
  },
  data() {
    return {
      active: "first",
      // 当前操作用户的id
      id: this.$route.query.id,
      //保存当前操作的用户信息
      userInfo: {},
      // 数据源
      formData: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "姓名不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          { min: 6, max: 9, message: "密码长度6-9位", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    // 更新用户名 & 密码
    async submit() {
      try {
        await saveUserDetailById({
          ...this.userInfo,
          ...this.formData,
        });
        // 提示操作成功
        this.$message.success("更新用户名或者密码成功");
      } catch {
        console.log("出错啦");
      }
    },
    // 得到用户的基本信息
    async getUserInfo() {
      const res = await getUserInfoApi(this.id);
      // 当前操作的用户信息
      this.userInfo = res;
      // 将用户名 & 密码赋值给 formData
      this.formData.username = res.username;
      this.formData.password = res.password;
    },
    //跳转到打印
    toprint(){
      this.$router.push(`/employees/print/${this.id}?type=${this.active}`)
    }
  },
};
</script>

<style lang="scss" scoped>

.btnbox {
    position: relative;
    .btn {
      position: absolute;
      right: 10px;
      top: 0px;
      z-index: 999;
    }
  }
</style>